<template>
  <div class="meun">
      <router-link :to="{path:'/bashbord'}" style="text-decoration: none;">
        <div class="meun-item" v-if="zl">
          <img class="zl" src="../../assets/img/zl-active.png"/>
          <div class="zlName" style="color:#409EFF">总览</div>
        </div>
        <div class="meun-item" v-else>
          <img class="zl" src="../../assets/img/zl.png"/>
          <div class="zlName">总览</div>
        </div>
      </router-link>
      <router-link :to="{path:'/cluster-detail'}" style="text-decoration: none;">
        <div class="meun-item" v-if="jqgl">
          <img class="jqgl" src="../../assets/img/jqgl-active.png"/>
          <div class="jqglName" style="color:#409EFF">集群管理</div>
        </div>
        <div class="meun-item" v-else>
          <img class="jqgl" src="../../assets/img/jqgl.png"/>
          <div class="jqglName">集群管理</div>
        </div>
      </router-link>
      <router-link :to="{path:'/ecs-list'}" style="text-decoration: none;">
        <div class="meun-item" v-if="zjgl">
          <img class="zjgl-active" src="../../assets/img/zjgl-active.png"/>
          <div class="zjglName" style="color:#409EFF">主机管理</div>
        </div>
        <div class="meun-item" v-else>
          <img class="zjgl" src="../../assets/img/zjgl.png"/>
          <div class="zjglName">主机管理</div>
        </div>
      </router-link>
  </div>

</template>

<script>
  export default {
    props: {},
    name: 'common-meun',
    data(){
      return{}
    },
    
    computed:
    {
      zl(){return this.$route.path=="/bashbord"},
      zjgl(){return this.$route.path=="/ecs-list"||this.$route.path=="/ecs-detail"},
      jqgl(){return this.$route.path=="/cluster-detail"||this.$route.path=="/node-detail"}
    },
  }
</script>


